<template>
  <section>
    <ul class="flex justify-between items-center text-[13px] text-[#666] py-[10px] px-[15px]">
      <li class="flex-1 w-0 break-all text-center">
        {{ item.Name }}
      </li>
      <li class="flex-1 w-0 text-center">
        <div>{{ moment(item.CreatedAt).format("MM月DD日") }}</div>
        <div>{{ moment(item.CreatedAt).format("HH:mm") }}</div>
      </li>
      <li class="flex-1 w-0 text-center break-all">
        <div>{{ moment(item.UpdatedAt).format("MM月DD日") }}</div>
        <div>{{ moment(item.UpdatedAt).format("HH:mm") }}</div>
      </li>
      <li
        class="flex-1 w-0 text-center"
        :class="{
          'text-red': item.IncomeStatus == 2,
          'text-blue': item.IncomeStatus == 0
        }"
      >
        <template v-if="item.IncomeStatus == 1">
          <van-button
            size="small"
            type="primary"
            round
            class="!w-full !h-[24px]"
            @click.stop="emit('show', item.Id)"
          >
            待审核
          </van-button>
        </template>
        <template v-else>{{ statusMap[item.IncomeStatus].text }}</template>
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import moment from "moment";

withDefaults(
  defineProps<{
    item: JoinRoomRecordItem;
  }>(),
  {}
);

const statusMap: Record<string, TextType> = {
  0: { text: "通过", type: "success" },
  1: { text: "审核", type: "primary" },
  2: { text: "拒绝", type: "danger" }
};

const emit = defineEmits(["show"]);
</script>
